<template>
  <div ref="table">
    <el-table v-if="!fixHeight" ref="multipleTable" :border="false" size="medium" :show-summary="isShowSummary" :header-cell-style="{background:headerBgColor}" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center" />
      <el-table-column v-if="isShowSerialNumber" type="index" align="center" label="序号" min-width="50" />
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
      </template>
      <el-table-column v-if="isShowOperation" align="center" :fixed="fixedType?'right':fixedType" label="操作">
        <slot slot-scope="scope" name="operation" :data="scope.row" />
      </el-table-column>
    </el-table>

    <el-table v-else ref="multipleTable" :border="false" size="medium" :height="tableH" :show-summary="isShowSummary" :header-cell-style="{background:headerBgColor}" :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange">
      <el-table-column v-if="isShowSelection" type="selection" width="55" align="center" />
      <el-table-column v-if="isShowSerialNumber" type="index" align="center" label="序号" min-width="50" />
      <template v-for="k in props">
        <el-table-column v-if="k.fixw" :min-width="k.fixw" align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
        <el-table-column v-else align="center" :prop="k.prop" :label="k.label" :sortable="k.sort ? true : false">
          <slot slot-scope="scope" :name="k.prop" :data="scope.row">{{ scope.row[k.prop] }}</slot>
        </el-table-column>
      </template>
      <el-table-column v-if="isShowOperation" align="center" :fixed="fixedType?'right':fixedType" label="操作">
        <slot slot-scope="scope" name="operation" :data="scope.row" />
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    headerBgColor: {
      type: String,
      default: 'white'
    },
    fixHeight: {
      type: Boolean,
      default: false
    },
    tableH: {
      type: Number,
      default: 0
    },
    isShowSelection: {
      type: Boolean,
      default: false
    },
    isShowSerialNumber: {
      type: Boolean,
      default: true
    },
    isShowOperation: {
      type: Boolean,
      default: true
    },
    isShowSummary: {
      type: Boolean,
      default: false
    },
    fixedType: {
      type: Boolean,
      default: false
    },
    sort: {
      type: Array,
      default: () => []
    },
    props: Array,
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    }
  }
}
</script>
